<template>
  <div class="swiper-box">
    <div class="tdesign-demo-block--swiper">
      <div class="demo-item" v-for="(item, index) in props.bannerList" :key="index">
        <img
          style="pointer-events: none"
          v-show="getShow(index)"
          :src="$filters.getLinkUrl(item.url + `?imageView2/3/w/1920/h/1080/format/webp`)"
          class="image-boxs image-boxs-move t-image t-image--fit-cover t-image--position-center"
          :class="{ 'image-boxs-move1': index == current + 1, 'move-No': moveNoActive }"
        />
      </div>
    </div>

    <div class="arrow-left hw-click-cursor" @click.stop="addCruuent(1)" v-if="bannerListWithDuplicate.length > 1">
      <arrowLeft></arrowLeft>
    </div>
    <div class="arrow-right hw-click-cursor" @click.stop="addCruuent(2)" v-if="bannerListWithDuplicate.length > 1">
      <arrowRight></arrowRight>
    </div>

    <div class="dot-box">
      <!-- <div class="dot-item" v-for="(item, index) in props.bannerList" :key="index">
        <dotIcon :ischange="current === index" @click="current = index" fontsize="12px" />
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { urls } from '@/utils/request/upload';
import { ref, onMounted, onUnmounted, nextTick, onActivated, onDeactivated } from 'vue';
import arrowLeft from './arrowLeft.vue';
import arrowRight from './arrowRight.vue';
import dotIcon from './dotIcon.vue';
const webUrl: string = '?imageView2/1/format/webp';
const swiperHeight = ref(0);
const swiperWidth = ref(0);
const current = ref(0);
const timer = ref(null);
const moveNoActive = ref(false);
const props = defineProps({
  bannerList: {
    type: Array,
  },
});
// const bannerListWithDuplicate = [...props.bannerList, props.bannerList[0]];
const bannerListWithDuplicate = [...props.bannerList];
const change = (currents: number, context: any) => {
  current.value = currents;
};
onMounted(() => {
  timer.value = setInterval(() => {
    if (props.bannerList.length - 1 === current.value) {
      current.value = 0;
    } else {
      current.value = current.value + 1;
    }
  }, 6000);
});

onUnmounted(() => {
  current.value = 0;
  clearInterval(timer.value);
  timer.value = setInterval(() => {
    if (props.bannerList.length - 1 === current.value) {
      current.value = 0;
    } else {
      current.value = current.value + 1;
    }
  }, 6000);
});
onActivated(() => {
  clearInterval(timer.value);
});
onDeactivated(() => {
  clearInterval(timer.value);
});
const addCruuent = (e: number) => {
  clearInterval(timer.value);
  moveNoActive.value = true;
  if (e === 2) {
    if (current.value == props.bannerList.length - 1) {
      current.value = 0;
    } else {
      current.value = current.value + 1;
    }
  } else {
    if (current.value == 0) {
      current.value = props.bannerList.length - 1;
    } else {
      current.value = current.value - 1;
    }
  }
  timer.value = setInterval(() => {
    if (props.bannerList.length - 1 === current.value) {
      current.value = 0;
    } else {
      current.value = current.value + 1;
    }
  }, 6000);
  nextTick(() => {
    moveNoActive.value = false;
  });
};
const pathHref = (e?: string) => {
  if (e) {
    window.open(e);
  }
};
const getShow = (index) => {
  if (index === current.value) {
    return true;
  }
  if (index === current.value + 1) {
    return true;
  }
  if (current.value == props.bannerList.length - 1 && index === 0) {
    return true;
  }
  return false;
};
window.addEventListener('resize', () => {
  swiperWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  swiperHeight.value = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  //   console.log('屏幕宽度：' + swiperWidth.value);
  //   console.log('屏幕高度：' + swiperHeight.value);
});
</script>

<style lang="less" scoped>
.swiper-box {
  position: relative;
  width: 100%;
  height: 100vh;
  // height: 500px;
}
.tdesign-demo-block--swiper {
  width: 100%;
  height: 100vh;
}
.demo-item {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  .image-boxs {
    width: 100%;
    height: 100vh;
  }
  .image-boxs-move {
    transform-origin: center center;
    animation: move 6s infinite;
    z-index: 99;
  }
  .image-boxs-move1 {
    z-index: 50;
    animation: moves 6s infinite;
  }
}

@keyframes move {
  0% {
    transform: scale(1);
  }
  40% {
  }
  50% {
  }
  60% {
  }

  80% {
  }
  90% {
    opacity: 1;
  }
  99% {
    transform: scale(1.06);
    opacity: 0.05;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes moves {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  98% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);

    // opacity: 1;
  }
}
.arrow-left {
  position: absolute;
  top: calc(50vh - 20px);
  left: 50px;
  z-index: 120;
  // opacity: 0.4;
  width: 40px;
  height: 40px;
  transition: all 0.3s;

  backdrop-filter: blur(2px);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  .Homeiconfonts {
    transition: all 0.3s;
    font-size: 40px;
    line-height: 40px;
    color: #fff !important;
  }
  :deep(.iconfonts) {
    color: #fff !important;
  }
}

.arrow-right {
  position: absolute;
  top: calc(50vh - 20px);
  right: 50px;
  z-index: 120;
  transition: all 0.3s;
  width: 40px;
  height: 40px;
  // opacity: 0.4;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  user-select: none;
  .Homeiconfonts {
    transition: all 0.3s;
    font-size: 40px;
    line-height: 40px;
    color: #fff;
  }
  :deep(.iconfonts) {
    color: #fff !important;
  }
}

.chevron-box {
  font-size: 40px;
  color: #fff;
  opacity: 0.2;
}

.dot-box {
  display: flex;
  position: absolute;
  bottom: 25px;
  left: 50%;
  width: 100%;

  z-index: 99;
  //   transform: translate(-50%, -50%);
  :deep(.iconfonts) {
    font-size: 10px;
  }
}
.dot-active {
  height: 4px;
  background: #cfbda8;
  border-radius: 2px;
  opacity: 0.5;
}
.move-No {
  animation: none;
}
.hw-click-cursor {
  // background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  //   position: relative;
  :deep(.iconfonts) {
    font-size: 28px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.dot-item {
  :deep(.iconfonts) {
    color: #fff !important;
  }
}
.arrow-left:hover {
  background: rgba(0, 0, 0, 0.3);
}
.arrow-right:hover {
  background: rgba(0, 0, 0, 0.3);
}
</style>
